@import "../uni.scss";
// 方向
$direction: top, right, bottom, left;
// 边距
$spacing: 4px;
// 圆角
$rounded-size: 2px;
// 边框粗细
$border-size: 1px;
// 背景颜色
$color-list: (
    "white":#FFFFFF,
    "primary":$uni-color-primary,
    "primary-light-1":lighten($uni-color-primary, 5%),
    "primary-light-2":lighten($uni-color-primary, 10%),
    "primary-light-3":lighten($uni-color-primary, 15%),
    "primary-light-7":lighten($uni-color-primary, 50%),
    "primary-light-9":lighten($uni-color-primary, 60%),
    "primary-dark-1":darken($uni-color-primary, 5%),
    "primary-dark-2":darken($uni-color-primary, 10%),
    "primary-dark-3":darken($uni-color-primary, 15%),
    "success":$uni-color-success,
    "success-light-1":lighten($uni-color-success, 5%),
    "success-light-2":lighten($uni-color-success, 10%),
    "success-light-3":lighten($uni-color-success, 15%),
    "success-light-7":lighten($uni-color-success, 50%),
    "success-light-9":lighten($uni-color-success, 60%),
    "success-dark-1":darken($uni-color-success, 5%),
    "success-dark-2":darken($uni-color-success, 10%),
    "success-dark-3":darken($uni-color-success, 15%),
    "warning":$uni-color-warning,
    "warning-light-1":lighten($uni-color-warning, 5%),
    "warning-light-2":lighten($uni-color-warning, 10%),
    "warning-light-3":lighten($uni-color-warning, 15%),
    "warning-light-7":lighten($uni-color-warning, 50%),
    "warning-light-9":lighten($uni-color-warning, 60%),
    "warning-dark-1":darken($uni-color-warning, 5%),
    "warning-dark-2":darken($uni-color-warning, 10%),
    "warning-dark-3":darken($uni-color-warning, 15%),
    "danger":$uni-color-error,
    "danger-light-1":lighten($uni-color-error, 5%),
    "danger-light-2":lighten($uni-color-error, 10%),
    "danger-light-3":lighten($uni-color-error, 15%),
    "danger-light-7":lighten($uni-color-error, 50%),
    "danger-light-9":lighten($uni-color-error, 60%),
    "danger-dark-1":darken($uni-color-error, 5%),
    "danger-dark-2":darken($uni-color-error, 10%),
    "danger-dark-3":darken($uni-color-error, 15%),
    "dark":$uni-text-color,
    "dark-light-1":lighten($uni-text-color, 5%),
    "dark-light-2":lighten($uni-text-color, 10%),
    "dark-light-3":lighten($uni-text-color, 15%),
    "dark-light-7":lighten($uni-text-color, 50%),
    "dark-light-9":lighten($uni-text-color, 60%),
    "dark-dark-1":darken($uni-text-color, 5%),
    "dark-dark-2":darken($uni-text-color, 10%),
    "dark-dark-3":darken($uni-text-color, 15%),
    "info":$uni-text-color-grey,
    "info-light-1":lighten($uni-text-color-grey, 5%),
    "info-light-2":lighten($uni-text-color-grey, 10%),
    "info-light-3":lighten($uni-text-color-grey, 15%),
    "info-light-7":lighten($uni-text-color-grey, 50%),
    "info-light-9":#FAFAFA,
    "info-dark-1":darken($uni-text-color-grey, 5%),
    "info-dark-2":darken($uni-text-color-grey, 10%),
    "info-dark-3":darken($uni-text-color-grey, 15%),
    "hover":$uni-bg-color-hover,
    "mask":$uni-bg-color-mask,
    "white-mask":$uni-bg-color-white-mask,
    "placeholder":$uni-text-color-placeholder,
    "disable":$uni-text-color-disable,
    "grey":$uni-text-color-grey,
    "border-color":$uni-border-color
);

.pb-safe-area {
    padding-bottom: constant(safe-area-inset-bottom) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
}

.mx-auto,
.ml-auto {
    margin-left: auto !important;
}

.mx-auto,
.mr-auto {
    margin-right: auto !important;
}

@for $i from 0 through 10 {

    .p-#{$i},
    .pl-#{$i},
    .px-#{$i} {
        padding-left: $spacing * $i !important;
    }

    .p-#{$i},
    .pr-#{$i},
    .px-#{$i} {
        padding-right: $spacing * $i !important;
    }

    .p-#{$i},
    .pt-#{$i},
    .py-#{$i} {
        padding-top: $spacing * $i !important;
    }

    .p-#{$i},
    .pb-#{$i},
    .py-#{$i} {
        padding-bottom: $spacing * $i !important;
    }

    .m-#{$i},
    .ml-#{$i},
    .mx-#{$i} {
        margin-left: $spacing * $i !important;
    }

    .m-#{$i},
    .mr-#{$i},
    .mx-#{$i} {
        margin-right: $spacing * $i !important;
    }

    .m-#{$i},
    .mt-#{$i},
    .my-#{$i} {
        margin-top: $spacing * $i !important;
    }

    .m-#{$i},
    .mb-#{$i},
    .my-#{$i} {
        margin-bottom: $spacing * $i !important;
    }

    .top-#{$i} {
        top: $spacing * $i !important;
    }

    .left-#{$i} {
        left: $spacing * $i !important;
    }

    .right-#{$i} {
        right: $spacing * $i !important;
    }

    .bottom-#{$i} {
        bottom: $spacing * $i !important;
    }

    .top--#{$i} {
        top: -$spacing * $i !important;
    }

    .left--#{$i} {
        left: -$spacing * $i !important;
    }

    .right--#{$i} {
        right: -$spacing * $i !important;
    }

    .bottom--#{$i} {
        bottom: -$spacing * $i !important;
    }
}
.flex {
    display: flex;

    @each $var in wrap,
    nowrap {
        &-#{$var} {
            flex-wrap: $var;
        }
    }

    @each $var in column,
    row,
    column-reverse,
    row-reverse {
        &-#{$var} {
            flex-direction: $var;
        }
    }

    @each $var in center,
    baseline,
    flex-start,
    flex-end,
    space-around,
    space-between,
    space-evenly {
        &-y-#{$var} {
            align-items: $var;
        }
        &-x-#{$var} {
            justify-content: $var;
        }
    }
    @each $var in baseline,
    center,
    flex-start,
    flex-end,
    stretch,
    space-around,
    space-between,
    space-evenly{
        &-y-c-#{$var}{
            align-content: $var;
        }
        &-x-c-#{$var}{
            justify-content: $var;
        }
    }

    @for $i from 1 through 12 {
        &-#{$i} {
            flex: $i;
            // min-width: 0;
        }
    }

    &-center {
        align-items: center;
        justify-content: center;
    }
}

[class*="grid-columns-"] {
    display: grid;
}

.grid {
    display: grid;
    grid-template-columns: repeat(24, minmax(0px, 1fr));

    @for $i from 1 through 23 {
        &-columns-#{$i} {
            grid-template-columns: repeat($i, minmax(0px, 1fr));
        }
    }

    @for $i from 1 through 10 {

        &-x-gap-#{$i},&-gap-#{$i} {
            column-gap: $spacing * $i !important;
        }
        &-y-gap-#{$i},&-gap-#{$i} {
            row-gap: $spacing * $i !important;
        }
    }

    @for $i from 1 through 24 {
        &-column-#{$i} {
            grid-column: span $i / span $i;
        }
    }
}

@each $var in relative,
absolute,
fixed,
sticky {
    .position-#{$var} {
        position: $var;
    }
}

@for $i from 1 through 20 {
    .vh-#{$i * 5} {
        height: $i * 5vh;
    }

    .vw-#{$i * 5} {
        width: $i * 5vw;
    }

    .h-#{$i * 5} {
        height: $i * 5%;
    }

    .w-#{$i * 5} {
        width: $i * 5%;
    }

    .min-h-#{$i * 5} {
        min-height: $i * 5%;
    }

    .min-w-#{$i * 5} {
        min-width: $i * 5%;
    }

    .min-vh-#{$i * 5} {
        min-height: $i * 5vh;
    }

    .min-vw-#{$i * 5} {
        min-width: $i * 5vw;
    }
}

.bg-filter {
    backdrop-filter: blur(6px);
}

.bg {
    background-color: $uni-bg-color-grey;
}

.hover-bg:active {
    background-color: $uni-bg-color-hover;
}

/* #ifdef H5 */
uni-page {

    /* #endif */
    /* #ifndef H5 */
    page {

        /* #endif */
        @each $key,
        $color in $color-list {
            --xl-#{$key}:#{$color};
        }

        --xl-shadow: 0rpx 12rpx 32rpx 4rpx rgba(0, 0, 0, .04),
        0rpx 8rpx 20rpx rgba(0, 0, 0, .08);
        --xl-shadow-light: 0rpx 0rpx 12rpx rgba(0, 0, 0, .12);
        --xl-shadow-lighter: 0rpx 0rpx 6rpx rgba(0, 0, 0, .12);
        --xl-shadow-dark: 0rpx 16rpx 48rpx 16rpx rgba(0, 0, 0, .08),
        0rpx 12rpx 32rpx rgba(0, 0, 0, .12),
        0rpx 8rpx 16rpx -8rpx rgba(0, 0, 0, .16);
        /* #ifndef H5 */
    }

    /* #endif */
    /* #ifdef H5 */
}

/* #endif */

@each $key,
$color in $color-list {

    .bg-#{$key},
    .hover-bg-#{$key}:active {
        background-color: var(--xl-#{$key});
    }

    .text-#{$key},
    .uni-textarea-placeholder.text-#{$key},
    .uni-input-placeholder.text-#{$key} {
        color: var(--xl-#{$key});
    }

    .btn-#{$key} {
        background-color: var(--xl-#{$key});
        border-color: var(--xl-#{$key});
        color: #FFFFFF;
    }

    .button-hover.btn-#{$key},
    .btn-#{$key}-hover {
        background-color: var(--xl-#{$key});
        border-color: var(--xl-#{$key});
        opacity: 0.75;
    }

    .btn-#{$key}[plain] {
        background-color: transparent;
        border-color: var(--xl-#{$key});
        color: var(--xl-#{$key});
    }

    .btn-#{$key}[disabled]:not([type]) {
        background-color: var(--xl-#{$key});
        opacity: 0.6;
        color: #FFFFFF;
    }

    @each $i in $direction {

        .border.border-#{$key},
        .border-#{$i}.border-#{$i}-#{$key} {
            border-#{$i}-color: var(--xl-#{$key});
        }

        .border-hover-#{$key}:hover,
        .border-hover-#{$i}-#{$key}:hover {
            border-#{$i}-color: var(--xl-#{$key});
        }
    }
}

uni-button[size="small"] {
    line-height: 2.5;
    font-size: 16px;
    padding: 0 1.5em;
}


.text {

    @each $var in nowrap,
    wrap {
        &-#{$var} {
            white-space: $var;
        }
    }

    @each $var in break-all,
    break-word,
    keep-all {
        &-#{$var} {
            word-break: $var;
        }
    }

    @for $i from 1 through 5 {
        &-ellipsis-#{$i} {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: $i;
            -webkit-box-orient: vertical;
        }
    }

    @for $i from 1 through 10 {
        &-spacing-#{$i} {
            word-spacing: $i * 0.53333vw;
        }
    }

    @each $var in left,
    center,
    right,
    initial {
        &-#{$var} {
            text-align: $var;
        }
    }

    @each $var in capitalize,
    uppercase,
    lowercase {
        &-#{$var} {
            text-transform: $var;
        }
    }

    &-s {
        text-decoration: line-through;
    }
}

@each $i in $direction {

    .border,
    .border-#{$i} {
        border-#{$i}-width: $border-size;
        border-#{$i}-style: solid;
        border-#{$i}-color: var(--xl-border-color);
    }
}

@for $i from 0 through 6 {
    @each $n in $direction {

        .border-#{$i},
        .border-#{$n}.border-#{$n}-#{$i} {
            border-#{$n}-width: $i * $border-size;
        }
    }
}

@each $i in dotted,
dashed,
double,
groove,
ridge,
inset,
outset {
    @each $n in $direction {

        .border-#{$i},
        .border-#{$n}.border-#{$n}-#{$i} {
            border-#{$n}-style: $i;
        }
    }
}

.rounded-circle {
    border-radius: 50% !important;
}

.rounded-round {
    border-radius: 999px !important;
}

@for $i from 0 through 6 {
    @if $i ==1 {

        .rounded,
        .rounded-left,
        .rounded-bottom,
        .rounded-bottom-left {
            border-bottom-left-radius: $i * $rounded-size;
        }

        .rounded,
        .rounded-left,
        .rounded-top,
        .rounded-top-left {
            border-top-left-radius: $i * $rounded-size;
        }

        .rounded,
        .rounded-right,
        .rounded-bottom,
        .rounded-bottom-right {
            border-bottom-right-radius: $i * $rounded-size;
        }

        .rounded,
        .rounded-right,
        .rounded-top,
        .rounded-top-right {
            border-top-right-radius: $i * $rounded-size;
        }
    }

    @else {

        .rounded-#{$i},
        .rounded-left-#{$i},
        .rounded-bottom-#{$i},
        .rounded-bottom-left-#{$i} {
            border-bottom-left-radius: $i * $rounded-size !important;
        }

        .rounded-#{$i},
        .rounded-left-#{$i},
        .rounded-top-#{$i},
        .rounded-top-left-#{$i} {
            border-top-left-radius: $i * $rounded-size !important;
        }

        .rounded-#{$i},
        .rounded-right-#{$i},
        .rounded-bottom-#{$i},
        .rounded-bottom-right-#{$i} {
            border-bottom-right-radius: $i * $rounded-size !important;
        }

        .rounded-#{$i},
        .rounded-right-#{$i},
        .rounded-top-#{$i},
        .rounded-top-right-#{$i} {
            border-top-right-radius: $i * $rounded-size !important;
        }
    }
}

.font-weight {
    &-bold {
        font-weight: bold;
    }

    &-normal {
        font-weight: normal;
    }

    @for $i from 1 through 9 {
        &-#{$i * 100} {
            font-weight: $i * 100;
        }
    }
}

@for $i from 1 through 10 {
    .h#{$i} {
        font-size: 32px - ($i * 2px);
    }
}

.line-height {
    line-height: 1;

    @for $i from 1 through 10 {
        &-#{$i} {
            line-height: 20px + ($i * 2px);
        }
    }
}

@each $i in hidden,
visible,
auto,
scroll {

    .overflow-#{$i},
    .overflow-x-#{$i} {
        overflow-x: $i;
    }

    .overflow-#{$i},
    .overflow-y-#{$i} {
        overflow-y: $i;
    }
}

@each $i in border-box,
content-box,
padding-box,
inherit,
initial,
unset {

    .bs-#{$i} {
        box-sizing: $i;
    }
}

@each $i in block,
inline,
inline-block,
inline-flex,
flex,
grid,
table,
table-cell,
table-row,
table-column,
table-column-group,
table-footer-group,
table-header-group,
table-row-group {
    .d-#{$i} {
        display: $i;
    }
}

.shadow {
    box-shadow: var(--xl-shadow);
}

@each $i in light,
lighter,
dark {
    .shadow-#{$i} {
        box-shadow: var(--xl-shadow-#{$i});
    }
}